<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="../style/journal.css" type="text/css" /><script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-65008-1";
urchinTracker();
</script><title>sort table by javascript</title>
</head>
<body>
<a href="index.html">Journal</a>(2005) | <a href="../blog/"><b>Blog</b></a>(2006) | <a href="http://www.fayland.org/cgi-bin/random_link.pl">RandomLink</a> | <a href="AboutFayland.html">WhoAmI</a> | <a href="LiveBookmark.html">LiveBookmark</a> | <a href="http://www.fayland.org/">HomePage</a>
<p><&lt;Previous: <a href="060225.html">job day</a>&nbsp;&nbsp;>>Next: <a href="ShareURL0603.html">Share the URLs (March 2006)</a></p>
<h1>sort table by javascript</h1>
<div class='content'>
<p>Category: <a href='Javascript.html'>Javascript</a> &nbsp; Keywords: <b>sort table</b></p>写程序的时候用到排序，用 SQL 语句就是 ORDER BY, 不过这要重新 query 一次程序造成负担。所以一般就可以考虑用 javascript 来达成目的。网络里有 n 多用 javascript 做的 sort table. <br />
用 Google 搜索了下， <a href='http://kryogenix.org/code/browser/sorttable/'>http://kryogenix.org/code/browser/sorttable/</a>

该 javascript library 非常简单。按网页的介绍：
<ul>
<li>将该库下载回来。然后在 HTML 中载入：<a href='http://kryogenix.org/code/browser/sorttable/sorttable.js'>http://kryogenix.org/code/browser/sorttable/sorttable.js</a>
<pre><code>&lt;script src="sorttable.js">&lt;/script>
&lt;table class="sortable" id="unique_id"></code></pre>
将 table 的 class 设置为 sortable, 再设置一个独有的 id 就可以了。
<li>如果嫌它不够好看就改一下 CSS
<pre><code>
&lt;style type="text/css">
/* Sortable tables */
table.sortable a.sortheader {
    background-color:#006DB3;
    color:white;
    font-weight: bold;
    text-decoration: none;
    display: block;
}
table.sortable span.sortarrow {
    color: white;
    text-decoration: none;
}
&lt;/style></code></pre>
</ul>
<style type="text/css">
/* Sortable tables */
table.sortable a.sortheader {
    background-color:#006DB3;
    color:white;
    font-weight: bold;
    text-decoration: none;
    display: block;
}
table.sortable span.sortarrow {
    color: white;
    text-decoration: none;
}
</style>

最后的大致效果如下：
<table id="t1" class="sortable" border='1'>
  <tr>
    <th>Name</th><th>Salary</th><th>Extension</th><th>Start date</th>
  </tr>
  <tr><td>Bloggs, Fred</td><td>$12000.00</td>
      <td>1353</td><td>18/08/2003</td></tr>
  <tr><td>Turvey, Kevin</td><td>$191200.00</td>
      <td>2342</td><td>02/05/1979</td></tr>
  <tr><td>Mbogo, Arnold</td><td>$32010.12</td>
      <td>2755</td><td>09/08/1998</td></tr>

  <tr><td>Shakespeare, Bill</td><td>$122000.00</td>
      <td>3211</td><td>12/11/1961</td></tr>
  <tr><td>Shakespeare, Hamnet</td><td>$9000</td>
      <td>9005</td><td>01/01/2002</td></tr>
  <tr><td>Fitz, Marvin</td><td>$3300</td>

      <td>5554</td><td>22/05/1995</td></tr>
</table>

<h4>Others</h4>
Jeff Peng 在 <a href='http://mail.pm.org/mailman/listinfo/china-pm'>China-pm maillist</a> 上 release 他翻译的 mod_perl，good job. :)
<a href='http://wazzy.nease.net/mod_perl/modperl_guide_cn.pdf'>http://wazzy.nease.net/mod_perl/modperl_guide_cn.pdf</a>
<script src="http://fayland.org/javascript/sorttable.js"></script></div>
<p><&lt;Previous: <a href="060225.html">job day</a>&nbsp;&nbsp;>>Next: <a href="ShareURL0603.html">Share the URLs (March 2006)</a></p>
<p><strong>Options:</strong> <a href='http://del.icio.us/post?title=sort%20table%20by%20javascript&url=http://www.fayland.org/journal/sorttable.html'>+Del.icio.us</a></p>
<strong>Related items</strong>
<ul><li><a href='SymbolTable.html'>符号表, local和my, * 与 \$</a> < <span class='digit'>2005-04-18 22:11:20</span> ></li><li><a href='Class-Data-Inheritable.html'>$Class[1] = 'Class::Data::Inheritable';</a> < <span class='digit'>2005-04-27 17:57:39</span> ></li></ul>
Created on <span class="digit">2006-02-26 17:23:18</span>, Last modified on <span class="digit">2006-02-26 17:37:51</span><br />
Copyright 2004-2006 All Rights Reserved. Powered by <a href="Eplanet.html">Eplanet</a> && <a href='http://catalyst.perl.org'>Catalyst</a> 5.66.
</body>
</html>